<template>
	<view class="code-bg" v-show="showCode">
		<view class="code-bg-blank animated fadeIn" @click="toggleCode(false)">
		</view>
		<view class="code-con animated fadeInUp" style="animation-duration:200ms">
			<view class="image-con">
				<input type="text" placeholder="请输入验证码"> 
				<image class="image" :src="imgUrl" ></image>
			</view>
			<button type="primary" class="mt40 button">确定</button>
			<text class="iconfont icon-close"></text>
		</view>
	</view>
	
</template>

<script>
	export default {
		props: {
			showCode:{
				type: Boolean,
				default: true
			},
			toggleCode:{
				type: Function,
				default: ()=>{}
			}
		},
		data(){
			return {
				imgUrl:'http://www.zutuan.cn/api/u/getvalidatecode?guid=0.2377342092067498'
			}
		}
	}
</script>

<style>
	.code-bg-blank{background:rgba(0,0,0,0.5);height: 100%;width: 100%; transition: all 2s;}
	.code-bg{position: fixed;z-index: 9999;top: 0;left: 0;width: 100%;height: 100%;}
	.code-bg .code-con{position: absolute;z-index: 0;
	width: 100%;left: 0;height: auto;box-sizing: border-box;padding: 40upx;
	bottom: 0;background: #fff;}
	.code-con .image{width: 200upx;height:75upx;}
	.image-con{display: flex;justify-content: space-between;align-items:center;}
	.image-con input{height: 75upx;line-height: 75upx;color: #666;}
</style>
